<template>
  <div>
    <el-container>
      <el-header></el-header>
      <el-footer></el-footer>
    </el-container>

    <el-row>
      <el-col :span="8" style="float: center">
        <img alt="Vue logo" src="@/assets/NULL.png" />
      </el-col>
      <el-col :span="8" style="float: center">
        <img alt="Vue logo" src="@/assets/logoH.png" />
        <h3 style="color:cornflowerblue">用户注册</h3>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" style="float: left">
        <img alt="Vue logo" src="@/assets/NULL.png" />
      </el-col>
      <el-col :span="8" header-align="center">
      <el-card shadow="hover"
        ><el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户昵称">
            <el-input v-model="form.user.username"></el-input>
          </el-form-item>
          <el-form-item label="用户密码">
            <el-input
              v-model="form.user.password"
              show-password
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="重复密码">
            <el-input
              v-model="form.repassword"
              show-password
              placeholder="再次输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即注册</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    </el-row>
    
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'RegistryView',
  data() {
    return {
      form: {
        user: {
          username: '',
          password: '',
        },
        repassword: '',
      },
    }
  },
  methods: {
    onSubmit() {
      //  验证两次的密码是否一致
      if (this.form.repassword !== this.form.user.password) {
        alert('两次密码不一致，请确认')
      } else {
        // console.log(this.form.user)
        axios
          .post('http://localhost:8088/user/registry', this.form.user)
          .then((resp) => {
            if (resp.data === 200) {
              //  切换组件
              this.$router.push({
                name: 'LoginView',
                params: {
                  uid: resp.data.data,
                },
              })
            } else {
              alert('注册失败')
            }
          })
          .catch((e) => {
            console.log(e)
          })
      }
    },
  },
}
</script>

<style scoped>
</style>